<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
<link rel="shortcut icon" type="image/x-icon" href="../assets/favicon.ico">
<title>source\jindo.Component.js - Jindo Component - AjaxUI@NHN</title>
<link rel="stylesheet" type="text/css" href="../assets/prettify/prettify-min.css" media="screen">
<script type="text/javascript">
	var isMobile = (function() {
		var r = window.devicePixelRatio || 1;
		if (/windows phone/i.test(navigator.userAgent)) { r = 2; }
		
		var s = Math.max(screen.width / r, screen.height / r);
		
		var m = s < 1024;
		var href = m ? "api.mobile.css" : "api.css";
		document.write('<link rel="stylesheet" type="text/css" href="../assets/' + href + '" media="screen">');
		
		return m;
	})();
</script>

<script type="text/javascript" src="../assets/jindo.desktop.min.js"></script>
<script type="text/javascript" src="../assets/jindo_component.min.js"></script>
</head>
<body class="api-page">
<div id="wrap" class="api-main"><!-- 2Depth 접기 : lft_fold 추가 -->

	<div id="header">
		<h1><a href="../index.html"><span class="blind">JindoJS</span></a></h1>
		<div class="info">
			<span class="version">version 1.6.0</span>
			<span class="bar">|</span>
			<span class="help"><span class="ic_help"></span><a href="http://devcode.nhncorp.com/projects/jindo-component/issue" target="_blank">버그신고/문의</a></span>
		</div>
		<div class="menu">
			<button type="button" id="toggle_search_btn" class="btn_sch"><span class="blind">검색</span></button>
			<button type="button" id="toggle_list_btn" class="btn_snb btn_snb_on"><span class="blind">메뉴</span></button>
			<!-- [D] 클릭시 btn_sch_on,btn_snb_on 추가 -->
		</div>
	</div>

	<!-- sch_frm -->
	<div class="sch_frm hide_when_small">
		<h2 class="blind">검색</h2>
		<div class="filter">
			<input type="search" id="api-filter" placeholder="검색어를 입력하세요.">
		</div>
		<div id="search-tab" style="display:none;">
			<ul class="tabs">
			<li class="tc-tab">전체</li>
			<li class="tc-tab">키워드</li>
			<li class="tc-tab">클래스</li>
			<li class="tc-tab">메서드</li>
			<li class="tc-tab">프로퍼티</li>
			<li class="tc-tab">이벤트</li>
			</ul>
			<div class="panels">
				<ul id="api-all" class="tc-panel"></ul>
				<ul id="api-keywords" class="tc-panel"></ul>
				<ul id="api-classes" class="tc-panel"></ul>
				<ul id="api-methods" class="tc-panel"></ul>
				<ul id="api-attrs" class="tc-panel"></ul>
				<ul id="api-events" class="tc-panel"></ul>
			</div>

		</div>
	</div>
	<!-- // sch_frm -->

	<!-- container -->
	<div id="container">
		<!-- left-columns -->
		<div id="left-columns" class="sidemenu has_scrollbar">
			<h2 class="blind"><a href="../index.html"><span>APIs</span></a></h2>
<div class="snb depth1 scrollbar hide_when_small">
	<!-- [D] style="width:135px; height:384px; -->
	<div class="scrollbar-box">
		<div class="scrollbar-content">
			<div><ul>
			            <li class="">
			            	<a href="../classes/jindo.Accordion.html" class="">
			                	Accordion
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.AjaxHistory.html" class="">
			                	AjaxHistory
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.BrowseButton.html" class="">
			                	BrowseButton
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Cache.html" class="">
			                	Cache
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Calendar.html" class="">
			                	Calendar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Canvas.html" class="">
			                	Canvas
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.CheckBox.html" class="">
			                	CheckBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.CircularRolling.html" class="">
			                	CircularRolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Clipboard.html" class="">
			                	Clipboard
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Component.html" class="">
			                	Component
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DataBridge.html" class="">
			                	DataBridge
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DatePicker.html" class="">
			                	DatePicker
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DefaultTextValue.html" class="">
			                	DefaultTextValue
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Dialog.html" class="">
			                	Dialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DragArea.html" class="">
			                	DragArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DropArea.html" class="">
			                	DropArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.DynamicTree.html" class="">
			                	DynamicTree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Effect.html" class="">
			                	Effect
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.FileUploader.html" class="">
			                	FileUploader
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.FloatingLayer.html" class="">
			                	FloatingLayer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Foggy.html" class="">
			                	Foggy
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Formatter.html" class="">
			                	Formatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.HTMLComponent.html" class="">
			                	HTMLComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.InlineTextEdit.html" class="">
			                	InlineTextEdit
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerEffect.html" class="">
			                	LayerEffect
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerManager.html" class="">
			                	LayerManager
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LayerPosition.html" class="">
			                	LayerPosition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.LazyLoading.html" class="">
			                	LazyLoading
								
								

							    
						        
						            <span class="flag static" title="static"><span class="blind">static</span></span>
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ModalDialog.html" class="">
			                	ModalDialog
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.MouseGesture.html" class="">
			                	MouseGesture
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.MultipleAjaxRequest.html" class="">
			                	MultipleAjaxRequest
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.NumberFormatter.html" class="">
			                	NumberFormatter
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.NumericStepper.html" class="">
			                	NumericStepper
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Pagination.html" class="">
			                	Pagination
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Rolling.html" class="">
			                	Rolling
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RollingChart.html" class="">
			                	RollingChart
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RolloverArea.html" class="">
			                	RolloverArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.RolloverClick.html" class="">
			                	RolloverClick
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ScrollBar.html" class="">
			                	ScrollBar
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.ScrollBox.html" class="">
			                	ScrollBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.SelectArea.html" class="">
			                	SelectArea
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.SelectBox.html" class="">
			                	SelectBox
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Slider.html" class="">
			                	Slider
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.StarRating.html" class="">
			                	StarRating
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.TabControl.html" class="">
			                	TabControl
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.TextRange.html" class="">
			                	TextRange
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Timer.html" class="">
			                	Timer
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Transition.html" class="">
			                	Transition
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.Tree.html" class="">
			                	Tree
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.UIComponent.html" class="">
			                	UIComponent
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.UploadQueue.html" class="">
			                	UploadQueue
								
								

							    
						        
			            	</a>
			            </li>
			        
			            <li class="">
			            	<a href="../classes/jindo.WatchInput.html" class="">
			                	WatchInput
								
								

							    
						        
			            	</a>
			            </li>
			        </ul></div>
		</div>
	</div>
	<div class="scrollbar-v">
		<div class="scrollbar-button-up"></div>
		<div class="scrollbar-track">
			<div class="scrollbar-thumb" style="top: 0px; height: 222px; "></div>
		</div>
		<div class="scrollbar-button-down"></div>
	</div>
</div>


<button type="button" title="펼치기" class="btn_open">바로가기 열기<span class="ic"></span></button>
<button type="button" title="접기" class="btn_close">바로가기 닫기<span class="ic"></span></button>

		</div>
		<!-- // left-columns -->

		<!-- main content -->
		<div id="main">
			<div class="main_fix">
				<div class="content">
	
	<h1 class="blind">source/jindo.Component.js</h1>
	<div class="tc-panel first">
		<dl class="relation">
			<dt>파일명</dt>
			<dd>jindo.Component.js</dd>
			<dt>경로</dt>
			<dd>source/</dd>
		</dl>
		<div id="file" class="file">
		    <pre class="code prettyprint linenums">/**
	@fileOverview&nbsp;진도&nbsp;컴포넌트를&nbsp;구현하기&nbsp;위한&nbsp;코어&nbsp;클래스
	@version&nbsp;#__VERSION__#
**/

/**
	진도&nbsp;컴포넌트를&nbsp;구현하기&nbsp;위한&nbsp;코어&nbsp;클래스.
	다른&nbsp;컴포넌트가&nbsp;상속받는&nbsp;용도로&nbsp;사용된다.
	
	@class&nbsp;jindo.Component
	
	@keyword&nbsp;component,&nbsp;base,&nbsp;core
**/
jindo.Component&nbsp;=&nbsp;jindo.$Class({
	/**&nbsp;@lends&nbsp;jindo.Component.prototype&nbsp;*/

	_htEventHandler&nbsp;:&nbsp;null,
	_htOption&nbsp;:&nbsp;null,

	/**
		jindo.Component를&nbsp;초기화한다.
		
		@constructor
	**/
	$init&nbsp;:&nbsp;function()&nbsp;{
		var&nbsp;aInstance&nbsp;=&nbsp;this.constructor.getInstance();
		aInstance.push(this);
		this._htEventHandler&nbsp;=&nbsp;{};
		this._htOption&nbsp;=&nbsp;{};
		this._htOption._htSetter&nbsp;=&nbsp;{};
	},
	
	/**
		옵션&nbsp;값을&nbsp;가져온다.&nbsp;
		
		@method&nbsp;option
		@param&nbsp;{String}&nbsp;sName&nbsp;옵션의&nbsp;이름
		@return&nbsp;{Variant}&nbsp;옵션의&nbsp;값
	**/
	/**
		옵션&nbsp;값을&nbsp;설정한다.&nbsp;
		htCustomEventHandler&nbsp;옵션을&nbsp;선언해서&nbsp;attach()&nbsp;메서드를&nbsp;사용하지&nbsp;않고&nbsp;커스텀&nbsp;이벤트핸들러를&nbsp;등록할&nbsp;수&nbsp;있다.
		
		@method&nbsp;option
		@syntax&nbsp;sName,&nbsp;vValue
		@syntax&nbsp;oValue
		@param&nbsp;{String}&nbsp;sName&nbsp;옵션의&nbsp;이름
		@param&nbsp;{Variant}&nbsp;vValue&nbsp;옵션의&nbsp;값
		@param&nbsp;{Object}&nbsp;oValue&nbsp;하나&nbsp;이상의&nbsp;이름과&nbsp;값을&nbsp;가지는&nbsp;옵션&nbsp;객체
		@return&nbsp;{this}&nbsp;옵션&nbsp;값을&nbsp;설정한&nbsp;인스턴스&nbsp;자신
		@example
			var&nbsp;MyComponent&nbsp;=&nbsp;jindo.$Class({
				method&nbsp;:&nbsp;function()&nbsp;{
					alert(this.option(&quot;foo&quot;));
				}
			}).extend(jindo.Component);
			
			var&nbsp;oInst&nbsp;=&nbsp;new&nbsp;MyComponent();
			oInst.option(&quot;foo&quot;,&nbsp;123);&nbsp;//&nbsp;또는&nbsp;oInst.option({&nbsp;foo&nbsp;:&nbsp;123&nbsp;});
			oInst.method();&nbsp;//&nbsp;결과&nbsp;123
		@example
			//커스텀&nbsp;이벤트핸들러&nbsp;등록예제
			oInst.option(&quot;htCustomEventHandler&quot;,&nbsp;{
				test&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					
				}
			});
			
			//이미&nbsp;&quot;htCustomEventHandler&quot;&nbsp;옵션이&nbsp;설정되어있는&nbsp;경우에는&nbsp;무시된다.
			oInst.option(&quot;htCustomEventHandler&quot;,&nbsp;{
				change&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					
				}
			});
	**/
	option&nbsp;:&nbsp;function(sName,&nbsp;vValue)&nbsp;{
		switch&nbsp;(typeof&nbsp;sName)&nbsp;{
			case&nbsp;&quot;undefined&quot;&nbsp;:
				var&nbsp;oOption&nbsp;=&nbsp;{};
				for(var&nbsp;i&nbsp;in&nbsp;this._htOption){
					if(!(i&nbsp;==&nbsp;&quot;htCustomEventHandler&quot;&nbsp;||&nbsp;i&nbsp;==&nbsp;&quot;_htSetter&quot;)){
						oOption[i]&nbsp;=&nbsp;this._htOption[i];
					}
				}
				return&nbsp;oOption;
			case&nbsp;&quot;string&quot;&nbsp;:&nbsp;
				if&nbsp;(typeof&nbsp;vValue&nbsp;!=&nbsp;&quot;undefined&quot;)&nbsp;{
					if&nbsp;(sName&nbsp;==&nbsp;&quot;htCustomEventHandler&quot;)&nbsp;{
						if&nbsp;(typeof&nbsp;this._htOption[sName]&nbsp;==&nbsp;&quot;undefined&quot;)&nbsp;{
							this.attach(vValue);
						}&nbsp;else&nbsp;{
							return&nbsp;this;
						}
					}
					
					this._htOption[sName]&nbsp;=&nbsp;vValue;
					if&nbsp;(typeof&nbsp;this._htOption._htSetter[sName]&nbsp;==&nbsp;&quot;function&quot;)&nbsp;{
						this._htOption._htSetter[sName](vValue);	
					}
				}&nbsp;else&nbsp;{
					return&nbsp;this._htOption[sName];
				}
				break;
			case&nbsp;&quot;object&quot;&nbsp;:
				for(var&nbsp;sKey&nbsp;in&nbsp;sName)&nbsp;{
					if&nbsp;(sKey&nbsp;==&nbsp;&quot;htCustomEventHandler&quot;)&nbsp;{
						if&nbsp;(typeof&nbsp;this._htOption[sKey]&nbsp;==&nbsp;&quot;undefined&quot;)&nbsp;{
							this.attach(sName[sKey]);
						}&nbsp;else&nbsp;{
							continue;
						}
					}
					if(sKey&nbsp;!==&nbsp;&quot;_htSetter&quot;){
						this._htOption[sKey]&nbsp;=&nbsp;sName[sKey];
					}
					
					if&nbsp;(typeof&nbsp;this._htOption._htSetter[sKey]&nbsp;==&nbsp;&quot;function&quot;)&nbsp;{
						this._htOption._htSetter[sKey](sName[sKey]);	
					}
				}
				break;
		}
		return&nbsp;this;
	},
	
	/**
		옵션의&nbsp;setter&nbsp;함수를&nbsp;가져온다.&nbsp;
		옵션의&nbsp;setter&nbsp;함수는&nbsp;지정된&nbsp;옵션이&nbsp;변경되면&nbsp;수행되는&nbsp;함수이다.
		
		@method&nbsp;optionSetter
		@param&nbsp;{String}&nbsp;sName&nbsp;setter의&nbsp;이름
		@return&nbsp;{Function}&nbsp;setter&nbsp;함수
	**/
	/**
		옵션의&nbsp;setter&nbsp;함수를&nbsp;설정한다.&nbsp;
		옵션의&nbsp;setter&nbsp;함수는&nbsp;지정된&nbsp;옵션이&nbsp;변경되면&nbsp;수행되는&nbsp;함수이다.
		
		@method&nbsp;optionSetter
		@syntax&nbsp;sName,&nbsp;fSetter
		@syntax&nbsp;oValue
		@param&nbsp;{String}&nbsp;sName&nbsp;setter의&nbsp;이름
		@param&nbsp;{Function}&nbsp;fSetter&nbsp;setter&nbsp;함수
		@param&nbsp;{Object}&nbsp;oValue&nbsp;하나&nbsp;이상의&nbsp;setter&nbsp;이름과&nbsp;setter&nbsp;함수를&nbsp;가지는&nbsp;객체
		@return&nbsp;{this}&nbsp;옵션의&nbsp;setter&nbsp;함수를&nbsp;설정한&nbsp;인스턴스&nbsp;자신
		@example
			oInst.option(&quot;sMsg&quot;,&nbsp;&quot;test&quot;);
			oInst.optionSetter(&quot;sMsg&quot;,&nbsp;function(){
				alert(&quot;sMsg&nbsp;옵션&nbsp;값이&nbsp;변경되었습니다.&quot;);
			});
			oInst.option(&quot;sMsg&quot;,&nbsp;&quot;change&quot;);&nbsp;-&gt;&nbsp;alert발생
		@example
			//HashTable&nbsp;형태로&nbsp;설정가능
			oInst.optionSetter({
				&quot;sMsg&quot;&nbsp;:&nbsp;function(){
				},
				&quot;nNum&quot;&nbsp;:&nbsp;function(){
				}
			});
	**/
	optionSetter&nbsp;:&nbsp;function(sName,&nbsp;fSetter)&nbsp;{
		switch&nbsp;(typeof&nbsp;sName)&nbsp;{
			case&nbsp;&quot;undefined&quot;&nbsp;:
				return&nbsp;this._htOption._htSetter;
			case&nbsp;&quot;string&quot;&nbsp;:&nbsp;
				if&nbsp;(typeof&nbsp;fSetter&nbsp;!=&nbsp;&quot;undefined&quot;)&nbsp;{
					this._htOption._htSetter[sName]&nbsp;=&nbsp;jindo.$Fn(fSetter,&nbsp;this).bind();
				}&nbsp;else&nbsp;{
					return&nbsp;this._htOption._htSetter[sName];
				}
				break;
			case&nbsp;&quot;object&quot;&nbsp;:
				for(var&nbsp;sKey&nbsp;in&nbsp;sName)&nbsp;{
					this._htOption._htSetter[sKey]&nbsp;=&nbsp;jindo.$Fn(sName[sKey],&nbsp;this).bind();
				}
				break;
		}
		return&nbsp;this;
	},
	
	/**
		이벤트를&nbsp;발생시킨다.
		
		@method&nbsp;fireEvent
		@param&nbsp;{String}&nbsp;sEvent&nbsp;커스텀&nbsp;이벤트명
		@param&nbsp;{Object}&nbsp;oEvent&nbsp;커스텀&nbsp;이벤트&nbsp;핸들러에&nbsp;전달되는&nbsp;객체.
		@return&nbsp;{Boolean}&nbsp;핸들러의&nbsp;커스텀&nbsp;이벤트객체에서&nbsp;stop메서드가&nbsp;수행되면&nbsp;false를&nbsp;리턴
		@example
			//커스텀&nbsp;이벤트를&nbsp;발생시키는&nbsp;예제
			var&nbsp;MyComponent&nbsp;=&nbsp;jindo.$Class({
				method&nbsp;:&nbsp;function()&nbsp;{
					this.fireEvent(&#39;happened&#39;,&nbsp;{
						sHello&nbsp;:&nbsp;&#39;world&#39;,
						nAbc&nbsp;:&nbsp;123
					});
				}
			}).extend(jindo.Component);
			
			var&nbsp;oInst&nbsp;=&nbsp;new&nbsp;MyComponent().attach({
				happened&nbsp;:&nbsp;function(oCustomEvent)&nbsp;{
					alert(oCustomEvent.sHello&nbsp;+&nbsp;&#39;/&#39;&nbsp;+&nbsp;oCustomEvent.nAbc);&nbsp;//&nbsp;결과&nbsp;:&nbsp;world/123
				}
			});
			
			&lt;button&nbsp;onclick=&quot;oInst.method();&quot;&gt;Click&nbsp;me&lt;/button&gt;&nbsp;
	**/
	fireEvent&nbsp;:&nbsp;function(sEvent,&nbsp;oEvent)&nbsp;{
		oEvent&nbsp;=&nbsp;oEvent&nbsp;||&nbsp;{};
		var&nbsp;fInlineHandler&nbsp;=&nbsp;this[&#39;on&#39;&nbsp;+&nbsp;sEvent],
			aHandlerList&nbsp;=&nbsp;this._htEventHandler[sEvent]&nbsp;||&nbsp;[],
			bHasInlineHandler&nbsp;=&nbsp;typeof&nbsp;fInlineHandler&nbsp;==&nbsp;&quot;function&quot;,
			bHasHandlerList&nbsp;=&nbsp;aHandlerList.length&nbsp;&gt;&nbsp;0;
			
		if&nbsp;(!bHasInlineHandler&nbsp;&amp;&amp;&nbsp;!bHasHandlerList)&nbsp;{
			return&nbsp;true;
		}
		aHandlerList&nbsp;=&nbsp;aHandlerList.concat();&nbsp;//fireEvent수행시&nbsp;핸들러&nbsp;내부에서&nbsp;detach되어도&nbsp;최초수행시의&nbsp;핸들러리스트는&nbsp;모두&nbsp;수행
		
		oEvent.sType&nbsp;=&nbsp;sEvent;
		if&nbsp;(typeof&nbsp;oEvent._aExtend&nbsp;==&nbsp;&#39;undefined&#39;)&nbsp;{
			oEvent._aExtend&nbsp;=&nbsp;[];
			oEvent.stop&nbsp;=&nbsp;function(){
				if&nbsp;(oEvent._aExtend.length&nbsp;&gt;&nbsp;0)&nbsp;{
					oEvent._aExtend[oEvent._aExtend.length&nbsp;-&nbsp;1].bCanceled&nbsp;=&nbsp;true;
				}
			};
		}
		oEvent._aExtend.push({
			sType:&nbsp;sEvent,
			bCanceled:&nbsp;false
		});
		
		var&nbsp;aArg&nbsp;=&nbsp;[oEvent],&nbsp;
			i,&nbsp;nLen;
			
		for&nbsp;(i&nbsp;=&nbsp;2,&nbsp;nLen&nbsp;=&nbsp;arguments.length;&nbsp;i&nbsp;&lt;&nbsp;nLen;&nbsp;i++){
			aArg.push(arguments[i]);
		}
		
		if&nbsp;(bHasInlineHandler)&nbsp;{
			fInlineHandler.apply(this,&nbsp;aArg);
		}
	
		if&nbsp;(bHasHandlerList)&nbsp;{
			var&nbsp;fHandler;
			for&nbsp;(i&nbsp;=&nbsp;0,&nbsp;fHandler;&nbsp;(fHandler&nbsp;=&nbsp;aHandlerList[i]);&nbsp;i++)&nbsp;{
				fHandler.apply(this,&nbsp;aArg);
			}
		}
		
		return&nbsp;!oEvent._aExtend.pop().bCanceled;
	},

	/**
		커스텀&nbsp;이벤트&nbsp;핸들러를&nbsp;등록한다.
		
		@method&nbsp;attach
		@param&nbsp;{String}&nbsp;sEvent&nbsp;커스텀&nbsp;이벤트&nbsp;명
		@param&nbsp;{Function}&nbsp;fHandlerToAttach&nbsp;등록&nbsp;할&nbsp;커스텀&nbsp;이벤트&nbsp;핸들러
			@param&nbsp;{Object}&nbsp;fHandlerToAttach.oCustomEvent&nbsp;커스텀&nbsp;이벤트&nbsp;객체
		@return&nbsp;{this}&nbsp;컴포넌트&nbsp;인스턴스&nbsp;자신
		@example
			//이벤트&nbsp;등록&nbsp;방법&nbsp;예제
			//아래처럼&nbsp;등록하면&nbsp;appear&nbsp;라는&nbsp;사용자&nbsp;이벤트&nbsp;핸들러는&nbsp;총&nbsp;3개가&nbsp;등록되어&nbsp;해당&nbsp;이벤트를&nbsp;발생시키면&nbsp;각각의&nbsp;핸들러&nbsp;함수가&nbsp;모두&nbsp;실행됨.
			//attach&nbsp;을&nbsp;통해&nbsp;등록할때는&nbsp;이벤트명에&nbsp;&#39;on&#39;&nbsp;이&nbsp;빠지는&nbsp;것에&nbsp;유의.
			function&nbsp;fpHandler1(oEvent)&nbsp;{&nbsp;....&nbsp;};
			function&nbsp;fpHandler2(oEvent)&nbsp;{&nbsp;....&nbsp;};
			
			var&nbsp;oInst&nbsp;=&nbsp;new&nbsp;MyComponent();
			oInst.onappear&nbsp;=&nbsp;fpHandler1;&nbsp;//&nbsp;직접&nbsp;등록
			oInst.attach(&#39;appear&#39;,&nbsp;fpHandler1);&nbsp;//&nbsp;attach&nbsp;함수를&nbsp;통해&nbsp;등록
			oInst.attach({
				appear&nbsp;:&nbsp;fpHandler1,
				more&nbsp;:&nbsp;fpHandler2
			});
	**/
	attach&nbsp;:&nbsp;function(sEvent,&nbsp;fHandlerToAttach)&nbsp;{
		if&nbsp;(arguments.length&nbsp;==&nbsp;1)&nbsp;{
			
			jindo.$H(arguments[0]).forEach(jindo.$Fn(function(fHandler,&nbsp;sEvent)&nbsp;{
				this.attach(sEvent,&nbsp;fHandler);
			},&nbsp;this).bind());
		
			return&nbsp;this;
		}
		
		var&nbsp;aHandler&nbsp;=&nbsp;this._htEventHandler[sEvent];
		
		if&nbsp;(typeof&nbsp;aHandler&nbsp;==&nbsp;&#39;undefined&#39;){
			aHandler&nbsp;=&nbsp;this._htEventHandler[sEvent]&nbsp;=&nbsp;[];
		}
		
		aHandler.push(fHandlerToAttach);
		
		return&nbsp;this;
	},
	
	/**
		커스텀&nbsp;이벤트&nbsp;핸들러를&nbsp;해제한다.
		
		@method&nbsp;detach
		@param&nbsp;{String}&nbsp;sEvent&nbsp;커스텀&nbsp;이벤트&nbsp;명
		@param&nbsp;{Function}&nbsp;fHandlerToDetach&nbsp;등록&nbsp;해제&nbsp;할&nbsp;커스텀&nbsp;이벤트&nbsp;핸들러
		@return&nbsp;{this}&nbsp;컴포넌트&nbsp;인스턴스&nbsp;자신
		@example
			//이벤트&nbsp;해제&nbsp;예제
			oInst.onappear&nbsp;=&nbsp;null;&nbsp;//&nbsp;직접&nbsp;해제
			oInst.detach(&#39;appear&#39;,&nbsp;fpHandler1);&nbsp;//&nbsp;detach&nbsp;함수를&nbsp;통해&nbsp;해제
			oInst.detach({
				appear&nbsp;:&nbsp;fpHandler1,
				more&nbsp;:&nbsp;fpHandler2
			});
	**/
	detach&nbsp;:&nbsp;function(sEvent,&nbsp;fHandlerToDetach)&nbsp;{
		if&nbsp;(arguments.length&nbsp;==&nbsp;1)&nbsp;{
			jindo.$H(arguments[0]).forEach(jindo.$Fn(function(fHandler,&nbsp;sEvent)&nbsp;{
				this.detach(sEvent,&nbsp;fHandler);
			},&nbsp;this).bind());
		
			return&nbsp;this;
		}

		var&nbsp;aHandler&nbsp;=&nbsp;this._htEventHandler[sEvent];
		if&nbsp;(aHandler)&nbsp;{
			for&nbsp;(var&nbsp;i&nbsp;=&nbsp;0,&nbsp;fHandler;&nbsp;(fHandler&nbsp;=&nbsp;aHandler[i]);&nbsp;i++)&nbsp;{
				if&nbsp;(fHandler&nbsp;===&nbsp;fHandlerToDetach)&nbsp;{
					aHandler&nbsp;=&nbsp;aHandler.splice(i,&nbsp;1);
					break;
				}
			}
		}

		return&nbsp;this;
	},
	
	/**
		등록된&nbsp;모든&nbsp;커스텀&nbsp;이벤트&nbsp;핸들러를&nbsp;해제한다.
		
		@method&nbsp;detachAll
		@param&nbsp;{String}&nbsp;sEvent&nbsp;이벤트명.&nbsp;생략시&nbsp;모든&nbsp;등록된&nbsp;커스텀&nbsp;이벤트&nbsp;핸들러를&nbsp;해제한다.&nbsp;
		@return&nbsp;{this}&nbsp;컴포넌트&nbsp;인스턴스&nbsp;자신
		@example
			//&quot;show&quot;&nbsp;커스텀&nbsp;이벤트&nbsp;핸들러&nbsp;모두&nbsp;해제
			oInst.detachAll(&quot;show&quot;);
			
			//모든&nbsp;커스텀&nbsp;이벤트&nbsp;핸들러&nbsp;해제
			oInst.detachAll();
	**/
	detachAll&nbsp;:&nbsp;function(sEvent)&nbsp;{
		var&nbsp;aHandler&nbsp;=&nbsp;this._htEventHandler;
		
		if&nbsp;(arguments.length)&nbsp;{
			
			if&nbsp;(typeof&nbsp;aHandler[sEvent]&nbsp;==&nbsp;&#39;undefined&#39;)&nbsp;{
				return&nbsp;this;
			}
	
			delete&nbsp;aHandler[sEvent];
	
			return&nbsp;this;
		}	
		
		for&nbsp;(var&nbsp;o&nbsp;in&nbsp;aHandler)&nbsp;{
			delete&nbsp;aHandler[o];
		}
		return&nbsp;this;				
	}
});

/**
	다수의&nbsp;컴포넌트를&nbsp;일괄&nbsp;생성하는&nbsp;Static&nbsp;Method
	
	@method&nbsp;factory
	@static
	@param&nbsp;{Array}&nbsp;aObject&nbsp;기준엘리먼트의&nbsp;배열
	@param&nbsp;{HashTable}&nbsp;htOption&nbsp;옵션객체의&nbsp;배열
	@return&nbsp;{Array}&nbsp;생성된&nbsp;컴포넌트&nbsp;객체&nbsp;배열
	@example
		var&nbsp;Instance&nbsp;=&nbsp;jindo.Component.factory(
			cssquery(&#39;li&#39;),
			{
				foo&nbsp;:&nbsp;123,
				bar&nbsp;:&nbsp;456
			}
		);
**/
jindo.Component.factory&nbsp;=&nbsp;function(aObject,&nbsp;htOption)&nbsp;{
	var&nbsp;aReturn&nbsp;=&nbsp;[],
		oInstance;

	if&nbsp;(typeof&nbsp;htOption&nbsp;==&nbsp;&quot;undefined&quot;)&nbsp;{
		htOption&nbsp;=&nbsp;{};
	}
	
	for(var&nbsp;i&nbsp;=&nbsp;0,&nbsp;el;&nbsp;(el&nbsp;=&nbsp;aObject[i]);&nbsp;i++)&nbsp;{
		oInstance&nbsp;=&nbsp;new&nbsp;this(el,&nbsp;htOption);
		aReturn[aReturn.length]&nbsp;=&nbsp;oInstance;
	}

	return&nbsp;aReturn;
};

/**
	컴포넌트의&nbsp;생성된&nbsp;인스턴스를&nbsp;리턴한다.
	
	@method&nbsp;getInstance
	@static
	@deprecated
	
	@remark&nbsp;본&nbsp;메서드는&nbsp;deprecated&nbsp;되었으며&nbsp;멀지&nbsp;않은&nbsp;릴리즈부터&nbsp;사라질&nbsp;예정입니다.&nbsp;
	
	@return&nbsp;{Array}&nbsp;생성된&nbsp;인스턴스의&nbsp;배열
**/
jindo.Component.getInstance&nbsp;=&nbsp;function(){
	if&nbsp;(typeof&nbsp;this._aInstance&nbsp;==&nbsp;&quot;undefined&quot;)&nbsp;{
		this._aInstance&nbsp;=&nbsp;[];
	}
	return&nbsp;this._aInstance;
};

/**
	사용하는&nbsp;컴포넌트의&nbsp;버전
	
	@property&nbsp;VERSION
	@static
	
	@type&nbsp;String
	@default&nbsp;&quot;1.3.0&quot;
	
	@example
		console.log(jindo.Component.VERSION);&nbsp;//&nbsp;&quot;1.3.0&quot;

	@since&nbsp;1.3.0
&nbsp;*/
jindo.Component.VERSION&nbsp;=&nbsp;&#39;#__VERSION__#&#39;;&nbsp;</pre>
		</div>
	</div>
</div>

			</div>
		</div>
		<!-- // main content -->

	</div>
	<!-- // container -->

	<!-- footer -->
	<div id="footer">
		<p>Copyright ©<a href="http://nhncorp.com/" target="_blank">NHN Corp.</a> Platform Ajax Team. All Rights Reserved.</p>
	</div>
	<!-- // footer -->

</div>
<!-- // wrap -->

<style type="text/css">

	.item {
		transition:background .2s linear;
		-webkit-transition:background .2s linear;
		-moz-transition:background .2s linear;
		-o-transition:background .2s linear;
		-ms-transition:background .2s linear;
	}
	
	.highlight {
		background-color:#ffffd8 !important;
	}
	
	li.selected a.highlight {
		background-color:#aa8 !important;
	}
	
	.hide-deprecated .deprecated-item, .hide-inherited .inherited-item, .private {
		display:none;
	}
	
	.scrollbar-v, .scrollbar-h { display:none; }
	.scrollbar-show { display:block; }
	
	.api-page .tbl_fold .more_history { display:none; }
	
	/* FILE */
	.file pre.code {
		border:1px solid #ccc;
		padding:0;
	}
	
	.file ol {
		padding-left: 4em;
		background-color: #f9f9f9;
	}

	.file ol li {
		list-style: decimal;
		border-left:1px solid #ccc;
		padding:2px 4px;
	}
	
	.file li.L1, .file li.L3, .file li.L5, .file li.L7, .file li.L9 {
		background-color: #f9f9f9;	
	}

	.file li.L0, .file li.L2, .file li.L4, .file li.L6, .file li.L8 { 
		background-color: #f0f0f0;
	}
	
</style>
<script type="text/javascript" src="../assets/prettify/prettify-min.js"></script>
<script type="text/javascript" src="../assets/hash.js"></script>
<script type="text/javascript" src="../assets/api-list.js"></script>
<script type="text/javascript" src="../assets/api-search.js"></script>
<script type="text/javascript" src="../assets/../api.js?callback=APISearch.setData"></script>
<script type="text/javascript">
	var projectRoot = "../";
	var projectAssets = "../assets";
	
    apiDocs(projectAssets);	
</script>
</body>
</html>